<template>
    <div class="shuichang">
        <div class="datalist">
            <div class="dataheader">
                <div class="headerlist" v-for="(item, index) in datalist.headerData" :key="index">
                    <span>
                        {{ item }}
                    </span>
                </div>
            </div>
            <div class="databoxs">
                <div v-for="(item, index) in datalist.data" :key="index" class="databox">
                    <div class="name">
                        <span>
                            {{ item.name }}
                        </span>
                    </div>
                    <div class="zcxsw">
                        <span>
                            {{ item.zcxsw }}
                        </span>
                    </div>
                    <div class="zkr">
                        <span>
                            {{ item.zkr }}
                        </span>
                    </div>
                    <div class="zckr">
                        <span>
                            {{ item.zckr }}
                        </span>
                    </div>
                    <div class="xczrr">
                        <span>
                            {{ item.xczrr }}
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            datalist: {
                headerData: ['水厂名称', '西部水厂', '鲘门水厂', '赤石水厂', '小漠水厂'],
                data: [
                    {
                        name: '建成时间',
                        zcxsw: '2019',
                        zkr: '1999',
                        zckr: '1996',
                        xczrr: '2005',
                    },
                    {
                        name: '取水水源',
                        zcxsw: '赤石河、下径水库、三角山水库',
                        zkr: '泗马岭水库',
                        zckr: '窑陂水库',
                        xczrr: '小漠水库',
                    },
                    {
                        name: '供水规模',
                        zcxsw: '5万立方米/每天',
                        zkr: '0.8万立方米/每天',
                        zckr: '0.4万立方米/每天',
                        xczrr: '0.8万立方米/每天 ',
                    },
                    {
                        name: '所在地',
                        zcxsw: '鹅埠镇',
                        zkr: '鲘门镇',
                        zckr: '赤石镇',
                        xczrr: '小漠镇',
                    },
                    {
                        name: 'PH值',
                        zcxsw: '9.9',
                        zkr: '0',
                        zckr: '0',
                        xczrr: '0',
                    },
                    {
                        name: '浊度(NTU)',
                        zcxsw: '99.9',
                        zkr: '0',
                        zckr: '0',
                        xczrr: '0',
                    },

                    {
                        name: '瞬时流量（m³/小时）入口',
                        zcxsw: '999.7',
                        zkr: '0',
                        zckr: '0',
                        xczrr: '0',
                    },

                    {
                        name: '瞬时流量（m³/小时）出口',
                        zcxsw: '999.6',
                        zkr: '0',
                        zckr: '0',
                        xczrr: '0',
                    },
                ],
            },
        }
    },
}
</script>

<style lang='scss' scoped>
.shuichang {
    width: 100%;
    height: 353px;
    // border: 1px solid red;
}
.datalist {
    .dataheader {
        width: 100%;
        height: 40px;
        background: rgba(1, 211, 248, 0.19);
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.651);
        position: relative;
        &::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 2px;
            bottom: -4px;
            background: rgba(1, 211, 248, 0.19);
        }
        .headerlist {
            width: 19.5%;
            text-align: center;
        }
    }
    .databoxs {
        // display: flex;
        overflow: auto;
        height: 300px;
        width: 100%;
        margin: 5px 0;
        > .databox:nth-of-type(odd) {
            > div {
                background: rgba(255, 255, 255, 0.05);
                font-size: 14px;
            }
        }
        > .databox:nth-of-type(even) {
            > div {
                // background: rgba(255, 255, 255, 0.05);
                font-size: 14px;
            }
        }
        .databox {
            width: 100%;
            text-align: center;
            display: flex;
            justify-content: space-around;
            align-items: center;

            > div {
                width: 19.5%;
                height: 50px;
                display: flex;
                justify-content: center;
                align-items: center;
                background: rgba(17, 38, 80, 0.3);
                margin: 5px 0px;
            }
            .name span {
                color: #5bd9fe;
            }
        }
    }
}
</style>